<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小U商城首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/font.css">
    <style>
        html {
            font-family: "Microsoft YaHei";
            font-size: 14px;
        }

        /* 容器标签的布局样式(固定宽度, 居中显示) */
        .layout {
            width: 1190px;
            margin: 0 auto;
        }
        .ov{
            overflow: hidden;
        }
        .rel {
            position: relative;
        }

        /* (封装)公共的样式 */
        /* 右侧更多>标签样式 */
        .more {
            font-size: 14px;
            float: right;
            line-height: 25px;
            color: #5a626f;
        }

        /* 自定义字体使用 */
        .icon {
            /* 定义使用的字体: (使用自定义的字体iconfont) */
            /* 注意上面已经引入了font.css字体文件(里面有@font-face自定义的字体) */
            font-family: "iconfont";
        }


        /* 顶部导航 */
        .nav_wrap {
            background-color: #f5f5f5;
            font-size: 12px;
        }
        .address_icon {
            color: orange;
            font-size: 16px;
        }
        .shop_icon {
            font-size: 16px;
        }
        .nav_content {
            overflow: hidden;
        }
        .nav_left {
            float: left;
            padding: 10px 0;
        }
        .nav_left a,
        .nav_right a {
            margin: 0 7px;
        }
        .nav_right {
            float: right;
            padding: 10px 0;
        }
        .nav_left a:hover {
            color: orange;
        }
        .nav_right a:hover {
            color: orange;
        }

        /* 结论: 字体图标和文字的大小一致的时候(两边标签高度相等), 才会水平卡其
            两边的高度不相等, 怎么让middle对齐?
            用transform来微调标签 
            transform: translate(0, 4px);
        */
        /* 侧边栏导航 */
        .left_nav {
            position: fixed;
            bottom: 100px;
        }

        .left_nav li {
            background-color: #f8f8f8;
            padding: 7px;
            border: 1px solid #e8e8e8;
        }

        /* 是li触发hover以后, 选中后代a标签, 来对a标签设置文字颜色 */
        .left_nav li:hover a {
            color: red;
        }

        /* logo容器部分 */
        /* .logo_wrap div 选择下属所有div */
        /* .logo_wrap>div 选择儿子辈div */
        .logo_wrap {
            overflow: hidden;
            padding: 28px 0;
        }

        .logo_wrap>div {
            float: left;
        }

        .input_title_wrap {
            margin-left: 150px;
        }

        .input_wrap {
            font-size: 0;
        }

        .search_input {
            font-family: "iconfont";
            width: 420px;
            border: 2px solid #ff6500;
            height: 36px;
            text-indent: 16px;
            outline: none;
            vertical-align: middle;
        }

        /* 修改输入框内, 占位文本的文字颜色 */
        /* 注意:浏览器兼容的问题(在有一些手机/ie浏览器, 此伪类不生效) */
        /* 可以配合js来使用:先填充一个具体内容(不用placeholder, 变成聚焦的时候再清空内容) */
        .search_input::placeholder {
            color: #ccc;
        }

        .search_btn {
            width: 118px;
            height: 42px;
            border: none;
            background-color: #ff6500;
            color: white;
            font-size: 20px;
            vertical-align: middle;
        }

        .hot_search_wrap {
            margin-top: 10px;
        }

        .hot_search_wrap {
            /* 目的让回车符号变成0, 但是内容需要独立设置font-size */
            font-size: 0;
        }

        .hot_search_wrap span {
            color: #333;
            font-size: 12px;
        }

        /* :after的意思, 在选中的标签内的末尾, 加入content内容 */
        /* .hot_search_wrap span:after{
            content: "|"
        } */
        .hot_search_wrap span {
            padding: 0 10px;
            border-right: 1px solid black;
            /* 改变鼠标在标签身上的样式 (pointer是小手) */
            /* a标签默认的cursor的值就是这个 */
            cursor: pointer;
        }

        /* 先拿到.hot_search_wrap下所有的孩子们, 再提取第一个, 如果是span则生效 */
        .hot_search_wrap span:first-child {
            padding-left: 0px;
        }

        .hot_search_wrap span:last-child {
            border: none;
        }

        .hot_search_wrap span:hover {
            color: red;
        }

        /* 轮播图部分 */
        .category_top_wrap {
            overflow: hidden;
        }

        .category_top,
        .category_choose {
            float: left;
        }

        .category_top {
            font-family: "iconfont";
            color: white;
            padding: 15px 80px 15px 15px;
            background-color: #ff6500;
            font-size: 14px;
            width: 200px;
            box-sizing: border-box;
        }

        .category_choose {
            margin-left: 20px;
            padding: 15px 0;
            font-size: 14px;
            font-weight: 900;
        }

        .category_choose a {
            margin: 0 10px;
        }

        .banner_wrap {
            /* 背景不算内容, 所以必须有宽高, 才会显示背景图 */
            background: #f33853 url("./images/banner.jpg") center center no-repeat;
        }

        /* 分类导航 */
        .category_wrap {
            background-color: #262221;
            width: 200px;
            padding: 0 10px;
            box-sizing: border-box;
            float: left;
        }

        .category_wrap li {
            padding: 8px 0;
        }

        .category_wrap a {
            font-size: 14px;
            color: white;
        }

        .category_wrap i {
            color: #6e6a69;
        }

        .banner_info {
            float: left;
            font-family: "iconfont";
            width: 990px;
            height: 450px;
            /* 因为子标签的百分比, 要参照你进行换算(每个父级都得有height) */
        }

        /* 让2个小箭头, 不以右侧的宽高都为0的div做参照物, 而是直接对中间的整个容器做参照物 */
        .banner_info span:first-child {
            position: absolute;
            left: 200px;
            top: 50%;
            /*找父级参照物再换算*/
            transform: translate(0, -50%);
        }

        .banner_info span:last-of-type {
            position: absolute;
            right: 0;
            top: 50%;
            /* 旋转是以左上角为原点(插住大头针), 想以自己中心点旋转(改变变换的基点) */
            /* 旋转以后, 平移会失去真正的位置 (还是找一个右箭头) */
            transform: translate(0, -50%) rotate(180deg);
        }

        /* 轮播图上的a标签 */
        .banner_info a {
            float: left;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #ccc;
            margin: 0 5px;
        }

        .dian_wrap {
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translate(-50%, 0);
        }

        .dian_wrap a:hover {
            background-color: orange;
        }

        /* 底下内容大区域 */
        .main {
            background-color: #f2f2f2;
            /* 口诀是95%情况下适用, 但是具体的 还要以浏览器具体的规则和样子来决定具体用什么 */
            padding-top: 20px;
        }

        /* 限时抢购和大聚会 */
        .sale_left,
        .sale_right {
            float: left;
        }

        .sale_left {
            width: 790px;
            background-color: white;
            padding: 20px 20px 15px;
            /* 让padding和border占width的地盘 */
            box-sizing: border-box;
            /* border: 1px solid black; */
        }

        .sale_right {
            width: 390px;
            background-color: white;
            margin-left: 10px;
            padding: 20px;
            box-sizing: border-box;
        }

        .sale_top {
            border-bottom: 1px solid #f6f6f6;
            padding-bottom: 10px;
        }

        .sale_top_title {
            float: left;
        }

        .sale_top_time {
            float: right;
        }

        .sale_top_title span {
            vertical-align: middle;
        }

        .sale_top_title span:first-of-type {
            color: #ff0000;
            font-size: 25px;
        }

        .sale_top_title span:nth-of-type(2) {
            font-size: 12px;
        }

        .sale_top_title span:nth-of-type(n + 3) {
            color: white;
            background-color: #333;
            padding: 5px;
        }

        .sale_top_time span {
            font-size: 14px;
            vertical-align: middle;
        }

        .sale_top_time span:first-of-type {
            color: white;
            background-color: #f22;
            border-radius: 31px;
            padding: 0 10px;
            margin-right: 30px;
        }

        .sale_item {
            width: 200px;
        }

        .sale_item p:first-of-type {
            font-size: 14px;
        }

        .price_wrap {
            margin-top: 10px;
        }

        .price_wrap span:first-of-type {
            font-size: 20px;
            color: #ff6600;
        }

        .price_wrap span:last-of-type {
            font-size: 14px;
            color: #999;
        }

        .sale_item p:last-of-type {
            font-size: 14px;
            color: #999;
            text-align: right;
        }

        .sale_item {
            margin: 0 10px;
            display: inline-block;
            overflow: hidden;
            padding: 15px;
            box-sizing: border-box;
        }

        .sale_item img {
            width: 170px;
        }

        .sale_bottom {
            /* white-space: 让所有孩子标签(行块标签), 强制在一行显示 */
            white-space: nowrap;
            font-size: 0;
            overflow-x: scroll;
            /* 隐藏纵向(不会出现纵向滚动条) */
            /* overflow-y: hidden; */
        }

        .sale_right_top {
            /* font-family: "iconfont"; */
            /* font-size: 14px; */
            padding-bottom: 10px;
            border-bottom: 1px solid #f6f6f6;
        }

        .sale_right_top span:first-of-type {
            font-size: 25px;
            float: left;
        }
        .srb_big_img {
            background-image: url("./images/banner01.jpg");
            background-size: 100% 100%;
            width: 350px;
            height: 175px;
        }

        .srb_border {
            width: 180px;
            height: 100px;
            border: 1px solid white;
            border-radius: 10px 24px 10px 24px;
            position: absolute;
            top: 45px;
            left: 25px;
            padding: 5px;
            box-sizing: border-box;
        }

        .srb_content {
            /* height: 90px; */
            background-color: white;
            border-radius: 10px 24px 10px 24px;
            text-align: center;
            padding: 8.25px 0;
        }

        .srb_content img {
            width: 65px;
        }

        /* 先选择所有的p标签类型, 再从p标签集合中, 选择第一个 */
        .srb_content p:first-of-type {
            font-size: 20px;
        }

        /* 先选择p标签类型, 再选择第二个 */
        .srb_content p:nth-of-type(2) {
            margin-top: 5px;
            font-size: 14px;
        }

        /* 先选择class叫srb_content的, 然后空格代表的是后代, 选择下属的p标签(提取第二个p), 然后接着选择这个p下属的所有span (筛选出第二个span)  最后的样式就是生效在
        第二个p下的第二个span */
        .srb_content p:nth-of-type(2) span:nth-of-type(2) {
            color: red;
        }

        .srb_small_img {
            margin-top: 10px;
        }

        .srb_small_img div {
            float: left;
            padding: 0 9px 5px;
            text-align: center;
            border: 1px solid #ccc;
            font-size: 14px;
            margin-right: 10px;
        }

        .srb_small_img div:last-of-type {
            margin-right: 0;
        }

        .srb_small_img img {
            width: 90px;
        }

        /* 排行榜和人气好货的样式 */
        .ranking_hot_wrap {
            margin-top: 20px;
        }

        .ranking_left,
        .hot_right {
            float: left;
        }

        .ranking_left {
            width: 390px;
            background-color: white;
            margin-right: 10px;
        }

        .hot_right {
            width: 790px;
            background-color: white;
        }

        .ranking_top>p:first-of-type {
            padding: 15px 15px 15px 0;
            background-color: #fdf6f6;
            overflow: hidden;
        }

        /* 如果是所有的span, 那么除了儿子辈的会选中一次, 孙子辈的第一个也会选中一次, ...后面同理  (解决只选儿子辈) */
        .ranking_top>p:first-of-type>span:first-of-type {
            float: left;
            border-left: 5px solid #DB5757;
            padding-left: 20px;
            color: #db5757;
            font-size: 18px;
        }

        .ranking_top>p:last-of-type {
            padding: 10px 0;
            margin: 0 20px;
            font-size: 14px;
            margin-top: 10px;
            border-bottom: 1px solid #f8f8f8;
        }

        .ranking_top>p:last-of-type>span {
            padding: 0 10px;
        }

        .ranking_top>p:last-of-type>span:first-of-type {
            background-color: #f86e6e;
            border-radius: 12px;
            color: white;
        }

        /* 排行榜商品列表 */
        .ranking_list {
            width: 350px;
            padding: 15px 20px 7px 20px;
        }

        .ranking_item>div {
            float: left;
        }

        .ranking_item>div:last-of-type {
            width: 240px;
            margin-left: 20px;
            padding: 15px 0;
        }

        .ranking_item img {
            width: 90px;
        }

        .ranking_goods_price {
            margin-top: 15px;
        }

        .ranking_goods_price span:first-of-type {
            color: #db5757;
            float: left;
            line-height: 24px;
            /* 小结: 
                水平方向2个"行块标"签不同高度, 想要水平以中线基线对齐(vertical-align:middle)
                如果不是行块标签(float浮动以后不再是), 想要水平以中线对齐(必须左右同高度 / transform微调)
            */
        }

        .ranking_goods_price span:last-of-type {
            color: #db5757;
            padding: 5px 10px;
            border-radius: 12px;
            background-color: #ffdfdf;
            float: right;
        }

        /* 人气好货 */
        .hot_right>p {
            background-color: #f7faf9;
            padding: 15px 15px 15px 0;
        }

        .hot_right span:first-of-type {
            font-size: 18px;
            /* 浮动元素, 可以让行高=标签的高(去掉行间距) */
            float: left;
            transform: translate(0, 2px);
            padding-left: 10px;
            border-left: 5px solid #1498E3;
            color: #1498E3;
        }

        .hot_right_content {
            padding: 13.5px;
        }

        .hot_item {
            float: left;
            width: 190px;
            text-align: center;
            border-right: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
            padding-bottom: 15px;
        }

        .hot_item img {
            width: 110px;
        }

        /* n : 0   ->  0 */
        /* n:  1   ->  4 */
        /* n: 2    ->  8 */
        .hot_right_content>.hot_item:nth-child(4n) {
            border-right: none;
        }

        .hot_right_content>.hot_item:nth-child(n + 5) {
            border-bottom: none;
        }

        .hot_item>p:last-of-type {
            color: #1498E3;
            margin-top: 10px;
        }

        /* 广告部分 */
        .ad_one {
            margin-top: 20px;
        }

        .ad_one img {
            float: left;
            /* 2位-8位小数 */
            width: 396.66666667px;
        }

        .ad_two {
            margin-top: 20px;
        }

        .ad_two_left,
        .ad_two_right {
            float: left;
        }

        .ad_two_left {
            width: 190px;
            background-image: url("./images/find01.png");
            text-align: center;
            color: white;
            padding-top: 10px;
            padding-bottom: 160px;
        }

        .ad_two_left_content {
            width: 160px;
            margin: 0 auto;
            padding: 55px 0 10px 0px;
            background-image: url("./images/find02.png");
            background-position: center;
            border-bottom-right-radius: 30px;
        }

        .ad_two_left_content p {
            color: rgba(255, 255, 255, 0.8);
        }

        .ad_two_left_content span {
            float: none;
        }

        .ad_two_right {
            width: 990px;
            margin-left: 10px;
            background-color: white;
            padding: 22px 20px;
            box-sizing: border-box;
        }

        .ad_two_right>div {
            width: 150px;
            margin-right: 50px;
            /* "当前"div标签之间浮动, 在一行排列 */
            float: left;
            /* 但是div里的"内容", 在当前div区域内, 居中显示 */
            text-align: center;
        }

        .ad_two_right>div:last-of-type {
            margin-right: 0px;
        }

        /* n 为0   标签 1 */
        /* n为 1   标签 3 */
        /* n为 2    标签 5 */
        .ad_two_right>div:nth-of-type(2n + 1) {
            padding-top: 50px;
        }

        /* 
            百分比布局(又叫流式布局)--浏览器放大/缩小, 对应百分比的数值就会放大和缩小 (百分比-放大/缩小)
            固定px  -- 浏览器放大/缩小, 哪怕出现滚动条, 也不会影响这个固定px标签的大小
         */

        /* 分类商品 */
        .category_goods {
            margin-top: 20px;
        }

        .category_goods_item {
            width: 590px;
            background-color: white;
            float: left;
            margin-right: 10px;
        }

        .category_goods_item:nth-of-type(2n) {
            margin-right: 0px
        }

        .category_goods_item:nth-of-type(n + 3) {
            margin-top: 40px;
        }

        .category_title_wrap {
            padding: 15px 15px 15px 0;
            background-color: #f9f9f9;
        }

        .category_title_left {
            border-left: 5px solid #3299CC;
            padding-left: 10px;
            color: #3299CC;
            font-size: 18px;
            float: left;
        }

        .category_title_right {
            float: right;
            color: #666;
            padding: 2px 0;
        }

        .category_title_right>span {
            margin: 0 5px;
        }

        .category_main_left,
        .category_main_right {
            float: left;
        }

        .category_main_left {
            width: 190px;
            /* height: 360px; */
            padding: 248px 0 50px 0;
            background-image: url("./images/b_img1.jpg");
            /* cover: 保持背景图片的横纵比例 */
            /* 100% 100%: 强制压缩图片, 破坏比例, 铺满整个标签的背景 */
            background-size: cover;
        }

        .category_main_left>div {
            color: white;
            width: 120px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 20px;
            border-radius: 0 10px 10px 0;
        }

        .category_main_left>div>p:first-of-type {
            font-size: 20px;
        }

        .category_main_left>div>p:last-of-type {
            font-size: 12px;
            margin-top: 10px;
        }

        .category_main_right {
            float: left;
            width: 400px;
        }

        .cmr_goods_item {
            float: left;
            width: 200px;
            border-right: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
            text-align: center;
            padding-top: 14px;
            padding-bottom: 7px;
            box-sizing: border-box;
        }

        .cmr_goods_item:nth-of-type(2n) {
            border-right: none;
        }

        /* 3 4 n */
        .cmr_goods_item:nth-of-type(n + 3) {
            border-bottom: none;
            padding-bottom: 8px;
        }

        .cmr_goods_item>img {
            width: 120px;
        }

        .cmr_goods_item>p:first-of-type {
            font-size: 16px;
            color: #333;
        }

        .cmr_goods_item>p:last-of-type {
            font-size: 12px;
            color: #3299cc;
            line-height: 20px;
        }

        /* 猜你喜欢 */
        .guess_love {
            margin-top: 20px;
        }
        .guess_love_title {
            background-color: #f9f9f9;
            border-left: 3px solid #fe9901;
            font-size: 18px;
            padding: 3px 0 3px 10px;
            margin-bottom: 20px;
        }
        .guess_love_goods_wrap{
            background-color: white;
        }
        .gl_goods_item {
            width: 200px;
            float: left;
            border-right: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
            padding: 18.6px;
            overflow: hidden;
            /* 产生居中的效果: 
                思路1:  先不管三七二十一,把所有的东西都设置成text-align: center; 然后单独对居左的标签设置text-aling: left;
                思路2:  思路2: 靠父级padding, 把内容都挤压到正中间
             */
        }

        .gl_goods_item:nth-of-type(5n){
            border-right: none;
        }
        .gl_goods_item_img_wrap{
            width: 200px;
            /* 浏览器打开的一瞬间, 标签的高度靠内容撑开, 不会随着内容的scale放大, 改变父级高度的大小 */
            /* 图片超出以外的部分, 都隐藏掉 */
            overflow: hidden;
        }
        .gl_goods_item_img_wrap>img {
            width: 200px;
            /* 如果写在hover里, 那么只有移入时候, 你添加了transition过渡动画, 但是移出时, hover里的css代码全部失效, 所以也就没有了过渡动画 */
            transition: all .5s;
        }
        .gl_goods_item_img_wrap>img:hover{
            /* 宽度默认以左上角/定位的角来固定不动, 放大我们的图片宽度 */
            /* transform默认以标签中心点为原点(基准点) (然后可以使用transform-origin: 水平位置(left center right), 垂直位置(top center bottom)) 可以修改基准点 */
            transform: scale(1.1);
        }
        .goods_title{
            font-size: 12px;
            color: #333;
            margin-top: 5px;
        }
        .goods_price{
            color: #ff6600;
            font-size: 16px;
            margin-top: 10px;
        }
        .goods_price>span>span{
            font-size: 12px;
        }
        .goods_price>span:last-of-type{
            border: 1px solid #f60;
            border-radius: 4px;
            float: right;
            font-size: 14px;
            padding: 3px 2px;
        }
        .goods_type{
            margin-top: 5px;
        }
        .goods_type span{
            background-color: #ff4400;
            font-size: 12px;
            color: white;
            padding: 3px 2px;
            border-radius: 4px;
        }
        .guess_love_bottom_line{
            text-align: center;
            margin: 20px 0 0 0;
            padding-bottom: 20px;
        }
        .guess_love_bottom_line>span:nth-of-type(2n + 1){
            display: inline-block;
            width: 97px;
            height: 1px;
            background-color: #ccc;
            vertical-align: middle;
        }
        /* 底部导航的样式 */
        .bottom_nav{
            background-color: #333;
            padding: 20px 0;
        }
        .bottom_nav_one{
            /* 内容必须是 行/行块标签 才会居中显示 */
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #3f3f3f;
        }
        .bn_1{
            /* 是ul内的"内容"居中显示 */
            text-align: center;
            /* 为什么不用浮动: 因为为了让这4个ul, 能够在父级范围下居中显示 */
            display: inline-block;
            margin: 0 75px;
        }
        .bn_1>li{
            color: #b6b6b6;
            margin: 15px 0;
        }
        .bn_1>li:first-of-type{
            color: #a7a7a7;
            font-size: 18px;
        }
        .bn_1>li:nth-of-type(n + 2){
            cursor: pointer;
        }
        .bn_1>li:nth-of-type(n + 2):hover{
            color: #ff6500;
        }
        .bottom_nav_two{
            margin-top: 40px;
            color: #646464;
            text-align: center;
            font-size: 12px;
        }
        .bottom_nav_two>p:last-of-type{
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <div class="nav_wrap">
        <div class="layout nav_content">
            <div class="nav_left icon">
                <!-- javascript:;代表点击a标签不执行任何的js代码(无任何效果, 也不会跳转/刷新(如果写#会刷新此页面)) -->
                <a  href="javascript:;">网站导航 &#xe73a;</a>
                <a href="javascript:;">商家入驻 &#xe73a;</a>
                <a href="javascript:;">客户服务 &#xe73a;</a>
                <a  href="javascript:;"> <span
                        class="address_icon">&#xe64e;</span> 北京
                    <span>&#xe601;</span> </a>
            </div>
            <div class="nav_right icon">
                <a href="javascript:;">请登录</a>
                <a href="javascript:;">注册有礼</a>
                <a href="javascript:;">我的订单 &#xe73a;</a>
                <a href="javascript:;">我的购物 &#xe73a;</a>
                <a href="javascript:;">小U会员</a>
                <a href="javascript:;"> <span class="shop_icon">&#xe600;</span>
                    购物车 &#xe73a;</a>
                <a href="javascript:;">易付宝</a>
                <a href="javascript:;">企业采购</a>
                <a href="javascript:;">手机小U &#xe73a;</a>
            </div>
        </div>
    </div>
    <!-- logo容器 -->
    <div class="logo_wrap layout">
        <div>
            <img src="./images/logo.jpg" alt="">
        </div>
        <div class="input_title_wrap">
            <div class="input_wrap">
                <input class="search_input" type="text"
                    placeholder="&#xe602; 到店每300减30">
                <input class="search_btn" type="button" value="搜索">
            </div>
            <div class="hot_search_wrap">
                <span>手机</span>
                <span>电动牙刷</span>
                <span>电视</span>
                <span>海尔空调</span>
                <span>洗衣机</span>
                <span>茅台</span>
                <span>热水器</span>
                <span>ipad</span>
                <span>微波炉</span>
            </div>
        </div>
    </div>
    <!-- 左侧导航固定定位 -->
    <ul class="left_nav icon">
        <li>
            <a href="javascript:;">特色优选</a>
        </li>
        <li>
            <a href="javascript:;">发现好货</a>
        </li>
        <li>
            <a href="javascript:;">服饰运动</a>
        </li>
        <li>
            <a href="javascript:;">金融阅读</a>
        </li>
        <li >
            <a href="javascript:;">猜你喜欢</a>
        </li>
        <li>
            <a href="javascript:;">&#xe673; 顶部</a>
        </li>
    </ul>
    <!-- 轮播图部分 -->
    <div class="layout category_top_wrap">
        <div class="category_top">&#xe63f; 全部商品分类</div>
        <div class="category_choose">
            <a href="javascript:;">限时抢购</a>
            <a href="javascript:;">红孩子</a>
            <a href="javascript:;">小U商城</a>
            <a href="javascript:;">电器城</a>
            <a href="javascript:;">生活家电</a>
            <a href="javascript:;">时尚服饰</a>
            <a href="javascript:;">金融</a>
        </div>
    </div>
    <div class="banner_wrap">
        <div class="layout ov rel">
            <!-- 左侧导航 -->
            <ul class="category_wrap">
                <li class="category_item">
                    <a href="#">手机</a>
                    <i>|</i>
                    <a href="#">运营商</a>
                    <i>|</i>
                    <a href="#">智能数码</a>
                </li>
                <li class="category_item">
                    <a href="#">空调</a>
                    <i>|</i>
                    <a href="#">电视</a>
                    <i>|</i>
                    <a href="#">冰箱</a>
                    <i>|</i>
                    <a href="#">洗衣机</a>
                </li>
                <li class="category_item">
                    <a href="#">厨卫大电</a>
                    <i>|</i>
                    <a href="#">生活家电</a>
                    <i>|</i>
                    <a href="#">厨具</a>
                </li>
                <li class="category_item">
                    <a href="#">电脑办公</a>
                    <i>|</i>
                    <a href="#">相机</a>
                    <i>|</i>
                    <a href="#">DIY</a>
                </li>
                <li class="category_item">
                    <a href="#">家居</a>
                    <i>|</i>
                    <a href="#">家具</a>
                    <i>|</i>
                    <a href="#">家装</a>
                    <i>|</i>
                    <a href="#">家纺</a>
                </li>
                <li class="category_item">
                    <a href="#">食品</a>
                    <i>|</i>
                    <a href="#">酒水</a>
                    <i>|</i>
                    <a href="#">生鲜</a>
                    <i>|</i>
                    <a href="#">特产</a>
                </li>
                <li class="category_item">
                    <a href="#">美妆</a>
                    <i>|</i>
                    <a href="#">个护</a>
                    <i>|</i>
                    <a href="#">清洁</a>
                    <i>|</i>
                    <a href="#">宠物</a>
                </li>
                <li class="category_item">
                    <a href="#">母婴</a>
                    <i>|</i>
                    <a href="#">玩具</a>
                    <i>|</i>
                    <a href="#">车床</a>
                    <i>|</i>
                    <a href="#">童装</a>
                </li>
                <li class="category_item">
                    <a href="#">运动</a>
                    <i>|</i>
                    <a href="#">户外</a>
                    <i>|</i>
                    <a href="#">足球</a>
                    <i>|</i>
                    <a href="#">跑步机</a>
                </li>
                <li class="category_item">
                    <a href="#">男装</a>
                    <i>|</i>
                    <a href="#">女装</a>
                    <i>|</i>
                    <a href="#">内衣</a>
                    <i>|</i>
                    <a href="#">鞋靴</a>
                </li>
                <li class="category_item">
                    <a href="#">箱包</a>
                    <i>|</i>
                    <a href="#">钟表</a>
                    <i>|</i>
                    <a href="#">珠宝</a>
                    <i>|</i>
                    <a href="#">艺术</a>
                </li>
                <li class="category_item">
                    <a href="#">汽车</a>
                    <i>|</i>
                    <a href="#">汽摩</a>
                    <i>|</i>
                    <a href="#">二手车</a>
                    <i>|</i>
                    <a href="#">车品</a>
                </li>
                <li class="category_item">
                    <a href="#">图书</a>
                    <i>|</i>
                    <a href="#">艺术</a>
                    <i>|</i>
                    <a href="#">原版</a>
                    <i>|</i>
                    <a href="#">文学</a>
                </li>
                <li class="category_item">
                    <a href="#">医药健康</a>
                    <i>|</i>
                    <a href="#">计生情趣</a>
                </li>
                <li class="category_item">
                    <a href="#">理财</a>
                    <i>|</i>
                    <a href="#">分期</a>
                    <i>|</i>
                    <a href="#">保险</a>
                </li>
            </ul>
            <!-- 图片上面的内容 -->
            <div class="banner_info">
                <div>
                    <span>&#xe603;</span>
                    <span>&#xe603;</span>
                </div>
                <div class="dian_wrap">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>

            </div>
        </div>
    </div>
    <!-- 底下内容大区域(背景色为灰色的容器div) -->
    <!-- 高度自适应(不要写height, 要靠内容撑开), 宽度可以固定宽 -->
    <div class="main">
        <div class="layout">
            <!-- 限时抢购和大聚惠 -->
            <div class="ov">
                <!-- 限时抢购 -->
                <div class="sale_left">
                    <div class="sale_top ov">
                        <div class="sale_top_title">
                            <span>限时抢购</span>
                            <span>距离下场</span>
                            <span>03</span>
                            <span>41</span>
                            <span>16</span>
                        </div>
                        <div class="sale_top_time">
                            <span>13:00场-正在疯抢</span>
                            <span>16:00场-即将开抢</span>
                        </div>
                    </div>
                    <div class="sale_bottom">
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="sale_item">
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>¥6.6</span>
                                <span>¥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>

                    </div>
                </div>
                <!-- 大聚会 -->
                <div class="sale_right">
                    <div class="sale_right_top ov">
                        <span>大聚惠</span>
                        <span class="more icon">更多 &#xe6e1;
                        </span>
                    </div>
                    <div class="sale_right_bottom">
                        <!-- 大图的 -->
                        <div class="srb_big_img rel">
                            <div class="srb_border">
                                <div class="srb_content">
                                    <img src="./images/banner02.jpg" alt="">
                                    <p>爆款直降</p>
                                    <p>
                                        <span>仅剩</span>
                                        <span>9小时</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 三张小图 -->
                        <div class="srb_small_img ov">
                            <div>
                                <img src="./images/banner03.jpg" alt="">
                                <p>爆款低至五折</p>
                            </div>
                            <div>
                                <img src="./images/banner02.jpg" alt="">
                                <p>爆款直降</p>
                            </div>
                            <div>
                                <img src="./images/banner04.jpg" alt="">
                                <p>爆款直降</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜和人气好货 -->
            <div class="ranking_hot_wrap ov">
                <div class="ranking_left">
                    <div class="ranking_top">
                        <p>
                            <span>排行榜</span>
                            <span>
                                <span class="more icon">更多 &#xe6e1;</span>
                            </span>
                        </p>
                        <p>
                            <span>精选</span>
                            <span>休闲食品</span>
                            <span>纸品清洁</span>
                            <span>干货调味</span>
                        </p>
                    </div>
                    <div class="ranking_list">
                        <div class="ranking_item ov">
                            <div>
                                <img src="./images/list01.jpg" alt="">
                            </div>
                            <div>
                                <p>好时 KISSES好时之吻曲奇奶香白巧克力82g</p>
                                <p class="ranking_goods_price ov">
                                    <span>¥15.5</span>
                                    <span>休闲食品销量No.1</span>
                                </p>
                            </div>
                        </div>
                        <div class="ranking_item ov">
                            <div>
                                <img src="./images/list02.jpg" alt="">
                            </div>
                            <div>
                                <p>蓝月亮 衣领净500g瓶 喷雾头衣领净 衣领清洁剂</p>
                                <p class="ranking_goods_price ov">
                                    <span>¥32.9</span>
                                    <span>纸巾清洁销量No.1</span>
                                </p>
                            </div>
                        </div>
                        <div class="ranking_item ov">
                            <div>
                                <img src="./images/list03.jpg" alt="">
                            </div>
                            <div>
                                <p>加加鲜味鲜生生抽500ml酿造生抽酱油 点蘸凉拌菜炒菜调味料调味品</p>
                                <p class="ranking_goods_price ov">
                                    <span>¥5.9</span>
                                    <span>干货调料销量No.1</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hot_right">
                    <p class="ov">
                        <span>人气好货</span>
                        <span class="more icon">更多 &#xe6e1;</span>
                    </p>
                    <div class="hot_right_content ov">
                        <div class="hot_item">
                            <img src="./images/item1.jpg" alt="">
                            <p>美的 料理机</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item2.jpg" alt="">
                            <p>美的 智能微波炉</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item3.jpg" alt="">
                            <p>白猫柔顺高效洗衣液</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item4.jpg" alt="">
                            <p>伊莱克斯 咖啡机</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item5.jpg" alt="">
                            <p>智能加湿 空气净化器</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item6.jpg" alt="">
                            <p>小熊全自动煎茶壶</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item7.jpg" alt="">
                            <p>象印不锈钢电水壶</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item8.jpg" alt="">
                            <p>康巴赫防溢不粘炖锅</p>
                            <p class="icon">&#xe604; 318人都说好</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告部分 -->
            <div class="ad_one ov">
                <img src="./images/img1.jpg" alt="">
                <img src="./images/img2.jpg" alt="">
                <img src="./images/img3.jpg" alt="">
            </div>
            <div class="ad_two ov">
                <div class="ad_two_left">
                    <div class="ad_two_left_content">
                        <p>探索新生活 <span class="more icon">&#xe6e1;</span></p>
                    </div>
                </div>
                <div class="ad_two_right">
                    <div>
                        <p>小米 大风量 吹风机</p>
                        <img src="./images/k1.webp" alt="">
                    </div>
                    <div>
                        <img src="./images/k2.webp" alt="">
                        <p>雷蛇 机械键盘</p>
                    </div>
                    <div>
                        <p>美心 椰心 鸡蛋卷</p>
                        <img src="./images/k3.webp" alt="">
                    </div>
                    <div>
                        <img src="./images/k4.webp" alt="">
                        <p>不锈钢 梳妆台</p>
                    </div>
                    <div>
                        <p>26支专业套装套刷</p>
                        <img src="./images/k5.webp" alt="">
                    </div>
                </div>
            </div>
            <!-- 分类商品 -->
            <div class="category_goods ov">
                <div class="category_goods_item">
                    <div class="category_title_wrap ov">
                        <!-- 因为&#xe605;16进制内容, 并不是自然世界里的文字内容, 所以计算机会以现有的所有字体(/你指定的字体)去解析这个内容, 发现无法解析和渲染, 所以就暂时给你个空白矩形 -->
                        <div class="category_title_left icon">智能数码 &#xe605;
                        </div>
                        <div class="category_title_right">
                            <span>智能频道</span>
                            <span>智能音箱</span>
                            <span>智能手表</span>
                            <span>平衡车</span>
                            <span>智能门锁</span>
                        </div>
                    </div>
                    <div class="category_main ov">
                        <div class="category_main_left">
                            <div>
                                <p>智能数码</p>
                                <p>爆款门锁直降</p>
                            </div>
                        </div>
                        <div class="category_main_right">
                            <div class="cmr_goods_item">
                                <p>小天才手表</p>
                                <p>儿童手表低至348起</p>
                                <img src="./images/good01.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>智能数码闹元宵</p>
                                <p>爆款至高12期免息</p>
                                <img src="./images/good02.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>家居品类日</p>
                                <p>儿童手表低至348起</p>
                                <img src="./images/good03.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>智能潮品</p>
                                <p>爆款低至79元</p>
                                <img src="./images/good04.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="category_goods_item">
                    <div class="category_title_wrap ov">
                        <!-- 因为&#xe605;16进制内容, 并不是自然世界里的文字内容, 所以计算机会以现有的所有字体(/你指定的字体)去解析这个内容, 发现无法解析和渲染, 所以就暂时给你个空白矩形 -->
                        <div class="category_title_left icon">汽车 &#xe605;
                        </div>
                        <div class="category_title_right">
                            <span>苏宁汽车</span>
                            <span>汽车广场</span>
                            <span>易好车</span>
                            <span>车管家</span>
                        </div>
                    </div>
                    <div class="category_main ov">
                        <div class="category_main_left" style="background-image: url(./images/b_img2.jpg);">
                            <div>
                                <p style="font-size: 16px;">车载空净半价购</p>
                                <p>健康保价</p>
                            </div>
                        </div>
                        <div class="category_main_right">
                            <div class="cmr_goods_item">
                                <p>新车会场</p>
                                <p>购买送油卡</p>
                                <img src="./images/good05.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>品质二手车</p>
                                <p>首付低至一成</p>
                                <img src="./images/good06.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>分期汽车</p>
                                <p>一成首付 秒提新车</p>
                                <img src="./images/good07.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>电摩新年焕新</p>
                                <p>爆品预售定金翻倍抵</p>
                                <img src="./images/good08.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="category_goods_item">
                    <div class="category_title_wrap ov">
                        <!-- 因为&#xe605;16进制内容, 并不是自然世界里的文字内容, 所以计算机会以现有的所有字体(/你指定的字体)去解析这个内容, 发现无法解析和渲染, 所以就暂时给你个空白矩形 -->
                        <div class="category_title_left icon">生活家电&#xe605;
                        </div>
                        <div class="category_title_right">
                            <span>生活电器</span>
                            <span>炊具</span>
                            <span>厨房电器</span>
                            <span>个人健康</span>
                        </div>
                    </div>
                    <div class="category_main ov">
                        <div class="category_main_left" style="background-image: url(./images/b_img3.jpg);">
                            <div>
                                <p>生活家电</p>
                                <p>9.9抢好货</p>
                            </div>
                        </div>
                        <div class="category_main_right">
                            <div class="cmr_goods_item">
                                <p>生活电器</p>
                                <p>戴森直降700</p>
                                <img src="./images/good09.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>烹饪炊具</p>
                                <p>满299减40</p>
                                <img src="./images/good10.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>厨房电器</p>
                                <p>爆款99元起</p>
                                <img src="./images/good11.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>个护健康</p>
                                <p>爆款买赠好礼</p>
                                <img src="./images/good12.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="category_goods_item">
                    <div class="category_title_wrap ov">
                        <div class="category_title_left icon">家装建材 &#xe605;
                        </div>
                        <div class="category_title_right">
                            <span>家装狂欢购</span>
                            <span>家具馆</span>
                            <span>卫浴馆</span>
                            <span>家装馆</span>
                        </div>
                    </div>
                    <div class="category_main ov">
                        <div class="category_main_left" style="background-image: url(./images/b_img4.jpg);">
                            <div>
                                <p>车载空净半价购</p>
                                <p>健康保价</p>
                            </div>
                        </div>
                        <div class="category_main_right">
                            <div class="cmr_goods_item">
                                <p>A家家具</p>
                                <p>领券立减50</p>
                                <img src="./images/good13.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>卫浴馆</p>
                                <p>每100减20</p>
                                <img src="./images/good14.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>五金电工</p>
                                <p>爆款低至7折</p>
                                <img src="./images/good15.jpg" alt="">
                            </div>
                            <div class="cmr_goods_item">
                                <p>公牛钜惠日</p>
                                <p>每300减15</p>
                                <img src="./images/good16.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ad_one ov">
                <img src="./images/img1.jpg" alt="">
                <img src="./images/img2.jpg" alt="">
                <img src="./images/img3.jpg" alt="">
            </div>
            <!-- 猜你喜欢 -->
            <div class="guess_love">
                <p class="guess_love_title">猜你喜欢</p>
                <div class="guess_love_goods_wrap ov">
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                    <div class="gl_goods_item">
                        <div class="gl_goods_item_img_wrap">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                        <p class="goods_title">【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白 </p>
                        <p class="goods_price ov">
                            <span>
                                <span>¥</span>44.90
                            </span>
                            <span>找相似</span>
                        </p>
                        <p class="goods_type">
                            <span>秒杀</span>
                            <span>领劵88-5</span>
                        </p>
                    </div>
                </div>
                <p class="guess_love_bottom_line">
                    <span></span>
                    <span>我也是有底线的</span>
                    <span></span>
                </p>
            </div>
        </div>
    </div>
    <!-- 底部导航 -->
    <div class="bottom_nav">
        <div class="bottom_nav_one">
            <ul class="bn_1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>支付方式</li>
                <li>配送方式</li>
            </ul>
            <ul class="bn_1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>支付方式</li>
                <li>配送方式</li>
            </ul>
            <ul class="bn_1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>支付方式</li>
                <li>配送方式</li>
            </ul>
            <ul class="bn_1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>支付方式</li>
                <li>配送方式</li>
            </ul>
        </div>
        <div class="bottom_nav_two">
            <p>Copyright©2010-2020 小U商城 版权所有 保留一切权利</p>
            <p>京ICP备10218183 京ICP证161188号 京公网安备 11010802020593号 出版经营许可证新出发京批字第直130052号</p>
        </div>
    </div>
</body>
</html>